<script setup>

import {Handle, useVueFlow, useNode} from "@vue-flow/core";

const {node} = useNode()
const props = defineProps({
	position: {
		type: Object,
		required: true,
	},
	data: {},
	id: null
})
// todo: 创建好的计时器或者控制器, 都应该显示在下方, 可以预览效果,并且显示状态
// todo: 计时器显示秒数
const timer = ref({
	showModal: false,
	title: "",
	message: "",
	action: true
})
const addTimer = () => {
	timer.value = {
		showModal: false,
		title: "",
		message: "",
		sleep: 3000,
		active: false
	}
}
const addManual = () => {
	timer.value = {
		showModal: false,
		title: "请开启激光器!",
		message: "开启激光器后点击确认继续执行!",
		action: true
	}
}

</script>

<template>
	<n-card class="h-fit hover:bg-sky-900/25" header-class="pt-1 pb-1">
		<template #header>
			<n-text>状态:{{ node.data.execuated ? "已执行" : "未执行" }}</n-text>
		</template>
		<template #default>
			<div class="border border-sky-700 p-1 flex flex-col gap-1 rounded">
				<Handle type="source" :position="data.sourcePosition"/>
				<Handle type="target" :position="data.targetPosition"/>
				<div class="nodrag nowheel flex flex-col gap-2">
					<n-space>
						<n-tag type="info">步骤:{{ id }}</n-tag>
						<n-tag type="warning">类型:{{ data.label }}</n-tag>
						<n-button secondary type="success" size="small" @click="addTimer">创建计时器</n-button>
						<n-button secondary type="info" size="small" @click="addManual">手动控制</n-button>
					</n-space>
					<n-space class="w-full" align="center">
				<span class="text-red-600 text-xl" v-if="timer.sleep"
					  style="font-variant-numeric: tabular-nums; white-space: nowrap">
      				<n-countdown :duration="timer.sleep" :active="timer.active"/>
    			</span>
						<n-input-number class="w-32" v-if="timer.sleep" :min="1" v-model:value="timer.sleep"/>
						<n-input placeholder="请输入标题" v-model:value="timer.title"></n-input>
						<n-input placeholder="请输入提示消息" v-model:value="timer.message"></n-input>
					</n-space>
				</div>
			</div>
		</template>


	</n-card>

	<n-modal v-model:show="timer.showModal" preset="dialog">
		<template #header>{{ timer.title }}</template>
		<n-text class="text-xl">{{ timer.message }}</n-text>
		<template #action v-if="timer.action">
			<n-space>
				<n-button>取消</n-button>
				<n-button type="success">确认</n-button>
			</n-space>
		</template>
	</n-modal>
</template>

<style scoped>

</style>